<template>
  <div class="my">
    <!-- 头部区域 -->
    <div class="header">
      <div class="top">
        <div class="img">
          <img
            class="image"
            :src="userinfolist.photo"
            @click="$router.push('/info')"
          />
        </div>
        <div class="userinfo">
          <div class="userinfoname">{{ userinfolist.name }}</div>
          <div class="userinfoapply">申请认证</div>
        </div>
        <div class="read">今日阅读5分钟</div>
      </div>
      <div class="bottom">
        <div class="item">
          <div class="shuzi">{{ userinfolist.art_count }}</div>
          <div class="dongtai">
            动态
          </div>
        </div>
        <div class="item">
          <div class="shuzi">
            {{ Math.abs(userinfolist.follow_count) }}
          </div>
          <div class="guanzhu">
            关注
          </div>
        </div>
        <div class="item">
          <div class="shuzi">{{ userinfolist.fans_count }}</div>
          <div class="fensi">
            粉丝
          </div>
        </div>
      </div>
    </div>

    <div class="baise">
      <!-- 图标 -->
      <div class="myicon">
        <div class="iconone">
          <div class="icon">
            <van-icon name="star-o" color="red" />
          </div>
          <div class="shoucang">收 藏</div>
        </div>
        <div class="iconone">
          <div class="icon">
            <van-icon name="clock-o" color="#ffbc64" />
          </div>
          <div class="lishi">历 史</div>
        </div>
        <div class="iconone">
          <div class="icon">
            <van-icon name="edit" color="#c9d7ff" />
          </div>
          <div class="zuopin">作 品</div>
        </div>
      </div>
      <!-- 实名认证 -->
      <div class="shiming">
        <van-cell-group>
          <van-cell title="消息通知" is-link />
        </van-cell-group>
        <van-cell-group>
          <van-cell title="实名认证" is-link />
        </van-cell-group>
      </div>
      <div class="shezhi">
        <van-cell-group>
          <van-cell title="用户反馈" is-link />
        </van-cell-group>
        <van-cell-group>
          <van-cell title="小智同学" is-link />
        </van-cell-group>
        <van-cell-group>
          <van-cell title="系统设置" is-link />
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
import { userinfomyApi } from '../../../api/myApi.js'
import { mapState } from 'vuex'
export default {
  name: 'MMY',
  computed: {
    ...mapState(['userInfo'])
  },
  data () {
    return {
      id: '',
      userinfolist: {}
    }
  },
  created () {
    this.$login()
    this.userinfomy()
  },
  methods: {
    async userinfomy () {
      const res = await userinfomyApi()
      console.log(res)
      this.userinfolist = res.data
      // console.log(this.userinfolist)
    }
  }
}
</script>

<style lang="less" scoped>
.my {
  .header {
    background-color: #419efa;
    .top {
      padding-top: 30px;
      margin-left: 20px;
      display: flex;

      .image {
        height: 70px;
        width: 70px;
        border-radius: 50%;
      }
      .userinfo {
        margin-left: 15px;
        margin-top: 10px;
        flex: 1;
        .userinfoname {
          font-size: 16px;
          padding-bottom: 10px;
          color: #ffffff;
        }
        .userinfoapply {
          font-size: 12px;
          height: 18px;
          width: 60px;
          border-radius: 10px;
          background-color: #fff;
          text-align: center;
          font-weight: 700;
          color: #419efa;
        }
      }
      .read {
        width: 100px;
        height: 40px;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        text-align: center;
        line-height: 40px;
        background-color: #3880c8;
        font-size: 12px;
        color: #ffffff;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      padding-bottom: 20px;
      .item {
        font-size: 18px;
        color: #fff;
        padding-left: 40px;
        padding-right: 40px;
        text-align: center;
        .dongtai {
          font-size: 12px;
        }
        .guanzhu {
          font-size: 12px;
        }
        .fensi {
          font-size: 12px;
        }
        .shuzi {
          text-align: center;
          padding-bottom: 3px;
        }
      }
    }
  }
  .baise {
    background-color: #f5f7f9;
    height: 100dh;
    .myicon {
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      padding: 15px 45px;
      .icon {
        text-align: center;
        /deep/ i.van-icon.van-icon-star-o {
          font-size: 28px;
        }
      }

      /deep/ i.van-icon.van-icon-clock-o {
        font-size: 28px;
      }
      /deep/ i.van-icon.van-icon-edit {
        font-size: 28px;
      }
      .shoucang {
        font-size: 14px;
      }
      .lishi {
        font-size: 14px;
      }
      .zuopin {
        font-size: 14px;
        text-align: center;
      }
    }
    .shiming {
      background-color: #fff;
      padding-left: 10px;
      margin-top: 5px;
    }
    .shezhi {
      background-color: #fff;
      margin: 5px 0px;
      border-bottom: 5px solid #f5f7f9;
      padding-left: 10px;
    }
  }
}
</style>
